import React, { memo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import classnames from "classnames";

import "./index.scss";
import { singerAlphas } from "@/utils/handle-data";
import artistAction from "store/action/artist";

const WYAlphaList = memo(function (props) {
  // REDUX
  const dispatch = useDispatch();
  const currentArea = useSelector((state) =>
    state.getIn(["artist", "currentArea"])
  );
  // data
  const [currentAlpha, setCurrentAlpha] = useState("-1");
  const bool = currentArea !== -1;

  const changeAlpha = (i) => {
    if (i === currentAlpha) return;
    setCurrentAlpha(i);
    dispatch(artistAction.getArtistList(i));
  };

  return (
    <div className={classnames("wy-alpha-list", bool ? "mt20" : "mt0")}>
      {bool &&
        singerAlphas.map((i, idx) => (
          <div
            className={classnames("item", { active: currentAlpha === i })}
            key={idx}
            onClick={(e) => changeAlpha(i)}
          >
            <span>{i === "-1" ? "热门" : i === "0" ? "其它" : i}</span>
          </div>
        ))}
    </div>
  );
});

export default WYAlphaList;
